﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生产工单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 新增/编辑表单 -->
    <form class="layui-form" style="padding: 10px;" lay-filter="productionForm">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">工单编码</label>
            <div class="layui-input-block">
                <input type="text" name="orderCode" required lay-verify="required" placeholder="请输入工单编号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">工单名称</label>
            <div class="layui-input-block">
                <input type="text" name="orderName" required lay-verify="required" placeholder="请输入工单名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">工单类型</label>
            <div class="layui-input-block">
                <select name="orderState" required lay-verify="required" lay-filter="orderState">
                    <option value="自产">自产</option>
                    <option value="外协">外协</option>
                    <option value="外购">外购</option>
                </select>
            </div>
        </div>
        <div id="supplierFields" style="display:none;">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:100px">供应商编码</label>
                <div class="layui-input-inline" style="width: 70%;">
                    <input type="text" name="supplierCode" placeholder="请输入供应商编码" autocomplete="off" class="layui-input" readonly>
                </div>
                <button type="button" class="layui-btn layui-btn-primary" id="selectSupplierBtn" style="margin-left: 10px;">
                    <i class="layui-icon">&#xe615;</i>
                </button>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:100px">供应商名称</label>
                <div class="layui-input-block">
                    <input type="text" name="supplierName" placeholder="请输入供应商名称" autocomplete="off" class="layui-input" readonly>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">来源类型</label>
            <div class="layui-input-block">
                <input type="radio" name="sourceType" value="客户订单" title="客户订单" lay-filter="sourceType">
                <input type="radio" name="sourceType" value="库存备货" title="库存备货" lay-filter="sourceType" checked>
            </div>
        </div>
        <div id="customerOrderFields" style="display:none;">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:100px">订单编号</label>
                <div class="layui-input-block">
                    <input type="text" name="orderNumber" placeholder="请输入订单编号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:100px">客户编码</label>
                <div class="layui-input-inline" style="width: 70%;">
                    <input type="text" name="customerCode" placeholder="请输入客户编码" autocomplete="off" class="layui-input" readonly>
                </div>
                <button type="button" class="layui-btn layui-btn-primary" id="selectCustomerBtn" style="margin-left: 10px;">
                    <i class="layui-icon">&#xe615;</i>
                </button>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:100px">客户名称</label>
                <div class="layui-input-block">
                    <input type="text" name="customerName" placeholder="请输入客户名称" autocomplete="off" class="layui-input" readonly>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">单据状态</label>
            <div class="layui-input-block">
                <select name="documentStatus" required lay-verify="required">
                    <option value="">请选择单据状态</option>
                    <option value="草稿">草稿</option>
                    <option value="已提交">已提交</option>
                    <option value="已完成">已完成</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">产品编号</label>
            <div class="layui-input-inline" style="width: 70%;">
                <input type="text" name="productionCode" required lay-verify="required" placeholder="请输入产品编号" autocomplete="off" class="layui-input" readonly>
            </div>
            <button type="button" class="layui-btn layui-btn-primary" id="selectProductBtn" style="margin-left: 10px;">
                <i class="layui-icon">&#xe615;</i>
            </button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">产品名称</label>
            <div class="layui-input-block">
                <input type="text" name="productionName" required lay-verify="required" placeholder="请输入产品名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">规格型号</label>
            <div class="layui-input-block">
                <input type="text" name="specifications" placeholder="请输入规格型号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">单位</label>
            <div class="layui-input-block">
                <input type="text" name="unit" placeholder="请输入单位" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">工单数量</label>
            <div class="layui-input-block">
                <input type="number" name="orderCount" required lay-verify="required|number" value="1" min="1" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">需求日期</label>
            <div class="layui-input-block">
                <input type="text" name="demandDate" id="demandDate" required lay-verify="required" placeholder="请选择需求日期" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">批次号</label>
            <div class="layui-input-block">
                <input type="text" name="batchCode" placeholder="请输入批次号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" style="width:100px">备注</label>
            <div class="layui-input-block">
                <textarea name="commont" placeholder="请输入备注内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitForm">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!-- 客户选择弹窗模板 -->
    <script type="text/html" id="customerSelectDialog">
        <div style="padding: 10px;">
            <table id="customerTable" lay-filter="customerTable"></table>
            <div style="text-align: right; margin-top: 10px;">
                <button class="layui-btn" id="customerSelectOk">确定</button>
                <button class="layui-btn layui-btn-primary" id="customerSelectCancel">取消</button>
            </div>
        </div>
    </script>
    <!-- 供应商选择弹窗模板 -->
    <script type="text/html" id="supplierSelectDialog">
        <div style="padding: 10px;">
            <table id="supplierTable" lay-filter="supplierTable"></table>
            <div style="text-align: right; margin-top: 10px;">
                <button class="layui-btn" id="supplierSelectOk">确定</button>
                <button class="layui-btn layui-btn-primary" id="supplierSelectCancel">取消</button>
            </div>
        </div>
    </script>
    <!-- 产品选择弹窗模板 -->
    <script type="text/html" id="productSelectDialog">
        <div class="layui-row" style="height: 100%;">
            <div class="layui-col-md3" style="height: 100%; border-right: 1px solid #e6e6e6;">
                <div style="padding: 10px;">
                    <input type="text" id="treeSearch" class="layui-input" placeholder="请输入分类名称" style="margin-bottom: 10px;">
                    <div id="materialTypeTree"></div>
                </div>
            </div>
            <div class="layui-col-md9" style="height: 100%;">
                <div style="padding: 10px;">
                    <form class="layui-form" lay-filter="productSearchForm">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <input type="text" name="materielCode" placeholder="产品编码" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <input type="text" name="materielName" placeholder="产品名称" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" lay-submit lay-filter="productSearchBtn">搜索</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                    <table id="productTable" lay-filter="productTable"></table>
                </div>
            </div>
        </div>
    </script>
    <script>
        layui.use(['table', 'form', 'layer', 'laydate', 'tree'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var tree = layui.tree;
            var $ = layui.$;
            // 解析url参数
            function getQueryString(name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURIComponent(r[2]);
                return null;
            }
            var id = getQueryString('id');
            // 初始化表单
            laydate.render({
                elem: '#demandDate',
                type: 'date'
            });
            if (id) {
                // 编辑，拉取数据
                $.get('/Prouduction/GetProdctionById', { id: id }, function(res){
                    if(res && res.data){
                        var data = res.data;
                        if(data.demandDate){
                            data.demandDate = layui.util.toDateString(new Date(data.demandDate), 'yyyy-MM-dd');
                        }
                        form.val('productionForm', data);
                        // 初始化显示状态
                        if(data.orderState === '自产'){
                            $('#supplierFields').hide();
                        }else{
                            $('#supplierFields').show();
                        }
                        if(data.sourceType === '客户订单'){
                            $('#customerOrderFields').show();
                            $('input[name="sourceType"][value="客户订单"]').prop('checked', true);
                        }else{
                            $('#customerOrderFields').hide();
                            $('input[name="sourceType"][value="库存备货"]').prop('checked', true);
                        }
                        form.render('radio');
                        form.render('select');
                    }
                });
            } else {
                // 新增，初始化表单
                var randomCode = Math.floor(100000000 + Math.random() * 900000000).toString();
                form.val('productionForm', {
                    id: null,
                    orderCode: randomCode,
                    orderName: '',
                    orderState: '自产',
                    sourceType: '库存备货',
                    orderNumber: '',
                    documentStatus: '草稿',
                    productionCode: '',
                    productionName: '',
                    specifications: '',
                    unit: '',
                    orderCount: 1,
                    demandDate: '',
                    batchCode: '',
                    customerCode: '',
                    customerName: '',
                    supplierCode: '',
                    supplierName: '',
                    commont: ''
                });
                $('#supplierFields').hide();
                $('#customerOrderFields').hide();
                form.render('radio');
                form.render('select');
            }
            // 工单类型切换
            form.on('select(orderState)', function(data){
                if(data.value === '自产'){
                    $('#supplierFields').hide();
                }else{
                    $('#supplierFields').show();
                }
            });
            // 来源类型切换
            form.on('radio(sourceType)', function(data){
                if(data.value === '客户订单'){
                    $('#customerOrderFields').show();
                }else{
                    $('#customerOrderFields').hide();
                }
            });
            // 客户选择按钮事件
            $(document).on('click', '#selectCustomerBtn', function () {
                layer.open({
                    type: 1,
                    title: '选择客户',
                    area: ['800px', '500px'],
                    content: $('#customerSelectDialog').html(),
                    success: function (layero, index) {
                        table.render({
                            elem: $(layero).find('#customerTable'),
                            url: '/Customer/ShowCustomer',
                            method: 'get',
                            page: true,
                            request: {
                                pageName: 'pageIndex',
                                limitName: 'pageSize'
                            },
                            cols: [[
                                { type: 'radio' },
                                { field: 'customerCode', title: '客户编码' },
                                { field: 'customerName', title: '客户名称' },
                                { field: 'customerShortName', title: '客户简称' },
                                { field: 'customerType', title: '客户类型' },
                                { field: 'customerPhone', title: '客户电话' },
                                { field: 'contact', title: '联系人' },
                                { field: 'contactPhone', title: '联系人电话' }
                            ]]
                        });
                        $(layero).on('click', '#customerSelectOk', function () {
                            var checked = table.checkStatus('customerTable').data[0];
                            if (!checked) {
                                layer.msg('请选择客户');
                                return;
                            }
                            // 回填到主表单
                            var $parent = $('form[lay-filter="productionForm"]');
                            $parent.find('input[name="customerCode"]').val(checked.customerCode);
                            $parent.find('input[name="customerName"]').val(checked.customerName);
                            layer.close(index);
                        });
                        $(layero).on('click', '#customerSelectCancel', function () {
                            layer.close(index);
                        });
                    }
                });
            });
            // 供应商选择按钮事件
            $(document).on('click', '#selectSupplierBtn', function () {
                layer.open({
                    type: 1,
                    title: '选择供应商',
                    area: ['800px', '500px'],
                    content: $('#supplierSelectDialog').html(),
                    success: function (layero, index) {
                        table.render({
                            elem: $(layero).find('#supplierTable'),
                            url: '/ProductionSystem/SupplierModel/GetSupplierList',
                            method: 'get',
                            page: true,
                            request: {
                                pageName: 'page',
                                limitName: 'limit'
                            },
                            response: {
                                statusName: 'code',
                                statusCode: 0,
                                msgName: 'msg',
                                countName: 'count',
                                dataName: 'data'
                            },
                            parseData: function(res) {
                                return {
                                    "code": res.code,
                                    "msg": res.msg,
                                    "count": res.count,
                                    "data": res.data
                                };
                            },
                            cols: [[
                                { type: 'radio' },
                                { field: 'supplierCode', title: '供应商编码' },
                                { field: 'supplierName', title: '供应商名称' },
                                { field: 'supplierGrade', title: '供应商等级' },
                                { field: 'supplierPhone', title: '供应商电话' },
                                { field: 'supplierAdress', title: '供应商地址' }
                            ]]
                        });
                        $(layero).on('click', '#supplierSelectOk', function () {
                            var checked = table.checkStatus('supplierTable').data[0];
                            if (!checked) {
                                layer.msg('请选择供应商');
                                return;
                            }
                            // 回填到主表单
                            var $parent = $('form[lay-filter="productionForm"]');
                            $parent.find('input[name="supplierCode"]').val(checked.supplierCode);
                            $parent.find('input[name="supplierName"]').val(checked.supplierName);
                            layer.close(index);
                        });
                        $(layero).on('click', '#supplierSelectCancel', function () {
                            layer.close(index);
                        });
                    }
                });
            });
            // 产品选择按钮点击事件
            $(document).on('click', '#selectProductBtn', function () {
                layer.open({
                    type: 1,
                    title: '选择产品（双击行可快速选择）',
                    area: ['900px', '550px'],
                    content: $('#productSelectDialog').html(),
                    success: function (layero, index) {
                        // 加载树形数据
                        function loadTree(keyword) {
                            $.get('/ProductionSystem/MasterData/GetMaterialTypeTree', function(res){
                                if (!res.data) {
                                    layer.msg('获取分类数据失败');
                                    return;
                                }
                                var treeData = res.data;
                                if (keyword) {
                                    function filterTree(nodes) {
                                        return nodes.filter(function(node){
                                            var match = node.label.toLowerCase().indexOf(keyword.toLowerCase()) !== -1;
                                            if (node.children && node.children.length) {
                                                node.children = filterTree(node.children);
                                                match = match || node.children.length > 0;
                                            }
                                            return match;
                                        });
                                    }
                                    treeData = filterTree(treeData);
                                }
                                function expandAll(nodes) {
                                    nodes.forEach(function(node){
                                        node.spread = true;
                                        if(node.children && node.children.length){
                                            expandAll(node.children);
                                        }
                                    });
                                }
                                expandAll(treeData);
                                layui.tree.render({
                                    elem: '#materialTypeTree',
                                    data: treeData,
                                    onlyIconControl: true,
                                    click: function(obj){
                                        layui.table.reload('productTable', {
                                            where: {
                                                materielTypeId: obj.data.id
                                            }
                                        });
                                    }
                                });
                            });
                        }
                        loadTree();
                        var searchTimer = null;
                        $('#treeSearch').on('input', function(){
                            clearTimeout(searchTimer);
                            var value = $(this).val();
                            searchTimer = setTimeout(function() {
                                loadTree(value);
                            }, 300);
                        });
                        layui.table.render({
                            elem: '#productTable',
                            url: '/ProductionSystem/MasterData/QueryMateriel',
                            method: 'get',
                            height: 520,
                            page: true,
                            limit: 10,
                            request: {
                                pageName: 'pageIndex',
                                limitName: 'pageSize'
                            },
                            cols: [[
                                {type: 'radio'},
                                {field: 'materielCode', title: '产品编码', width: 150},
                                {field: 'materielName', title: '产品名称', width: 200},
                                {field: 'specifications', title: '规格型号', width: 150},
                                {field: 'unitsId', title: '单位', width: 100},
                                {field: 'materialTypeName', title: '所属分类', width: 150}
                            ]],
                            done: function(res) {}
                        });
                        layui.form.on('submit(productSearchBtn)', function(data){
                            layui.table.reload('productTable', {
                                where: data.field
                            });
                            return false;
                        });
                        // 单选+确定
                        $(layero).on('click', '#productSelectOk', function () {
                            var checked = layui.table.checkStatus('productTable').data[0];
                            if (!checked) {
                                layer.msg('请选择产品');
                                return;
                            }
                            var $parent = $('form[lay-filter=\"productionForm\"]');
                            $parent.find('input[name=\"productionCode\"]').val(checked.materielCode);
                            $parent.find('input[name=\"productionName\"]').val(checked.materielName);
                            $parent.find('input[name=\"specifications\"]').val(checked.specifications);
                            $parent.find('input[name=\"unit\"]').val(checked.unitsId);
                            layer.close(index);
                        });
                        // 支持双击行直接选择
                        layui.table.on('rowDouble(productTable)', function(obj){
                            var data = obj.data;
                            var $parent = $('form[lay-filter=\"productionForm\"]');
                            $parent.find('input[name=\"productionCode\"]').val(data.materielCode);
                            $parent.find('input[name=\"productionName\"]').val(data.materielName);
                            $parent.find('input[name=\"specifications\"]').val(data.specifications);
                            $parent.find('input[name=\"unit\"]').val(data.unitsId);
                            layer.close(index);
                        });
                    }
                });
            });
            // 表单提交事件
            form.on('submit(submitForm)', function(data){
                var url = data.field.id ? '/Prouduction/UpdateProdction' : '/Prouduction/AddProdction';
                var method = data.field.id ? 'PUT' : 'POST';
                if (!data.field.id || data.field.id === '') {
                    data.field.id = 0;
                }
                $.ajax({
                    url: url,
                    type: method,
                    contentType: 'application/json',
                    data: JSON.stringify(data.field),
                    success: function(res){
                        var msg = data.field.id ? '编辑成功' : '添加成功';
                        layer.msg(msg, { icon: 1, time: 1000 }, function () {
                            if(window.parent && window.parent.reloadProductionTable){
                                window.parent.reloadProductionTable();
                            }
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        });
                    },
                    error: function(xhr, status, error){
                        layer.msg('保存失败：' + xhr.responseText, {icon: 2});
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>
